<!--
 * @Description: 
 * @Author: shuliang
 * @Date: 2022-05-10 11:18:40
 * @LastEditTime: 2022-08-23 15:40:10
 * @LastEditors: shuliang
-->
<template>
	<div class="system-user-container">
		<el-card shadow="hover">
			<vxe-grid v-bind="gridOptions">
				<template #toolbar_buttons>
					<el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
						<el-icon> <ele-FolderAdd /></el-icon>
						新增用户</el-button>
				</template>
				<template #status_default="{ row }">
					<el-tag type="success" v-if="row.status">启用</el-tag>
					<el-tag type="info" v-else>禁用</el-tag>
				</template>
				<template #operate="{ row }">
					<el-button :disabled="row.userName === 'admin'" size="small" type="text" @click="onOpenEditUser(row)">修改</el-button>
					<el-button :disabled="row.userName === 'admin'" size="small" type="text" @click="onRowDel(row)">删除</el-button>
				</template>
				<template #empty>
					<span style="color: red">
						<img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" />
						<p>没有更多数据了！</p>
					</span>
				</template>
			</vxe-grid>
		</el-card>
		<AddUer ref="addUserRef" />
		<EditUser ref="editUserRef" />
	</div>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from 'vue';
import { VxeGridProps } from 'vxe-table';
import { getUser } from '/@/api/user/index';
import { IUser, IUserParams } from '/@/models/system/user';
import AddUer from '/@/views/system/user/component/addUser.vue';
import EditUser from '/@/views/system/user/component/editUser.vue';

		
		const addUserRef = ref();
		const editUserRef = ref();

		const onOpenAddUser = () => {
			addUserRef.value.openDialog();
		};

		const onOpenEditUser = (row: IUser) => {
			editUserRef.value.openDialog(row);
		};


		const { proxy} = getCurrentInstance() as any;
		const onRowDel = (row: IUser) => {
			// proxy.msgInfo("测试测试")
			proxy
				.$confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				})
				.then(() => {
					proxy.msgSuccess('删除成功');
				})
				.catch(() => {});
		};
		// const toolBarBtnClick = ({ code, button, $event } :any)=>{
		//     console.log(code,button,$event)
		// }

		//生成表格
		const gridOptions = reactive<VxeGridProps>({
			border: false,
			height: 753,
			rowConfig: {
				keyField: 'id',
			},
			pagerConfig: {
				pageSize: 10,
			},
			formConfig: {
                titleWidth: 100,
                titleAlign: 'right',
                items: [
                  { field: 'userName', title: '账户名称', span: 6, titlePrefix: { message: '请输入账户名称', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入账户名称' } } },
                  { field: 'userNickname', title: '用户昵称', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入用户昵称' } } },
                  { field: 'status', title: '用户状态', span: 6,  itemRender: { name: '$select',props: { placeholder: '请选择用户状态' } , options: [{ label: '不可删除', value: '不可删除' },{ label: '测试用户', value: '测试用户' }] } },
                  { span: 6, align: 'left',  itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
                ]
              },
			columns: [
				{ type: 'checkbox', width: 50 },
				{ type: 'seq', title: '序号', width: 60 },
				{ field: 'userName', title: '账户名称', showOverflow: true },
				{ field: 'userNickname', title: '用户昵称', showOverflow: true },
				{ field: 'roleSign', title: '关联角色', showOverflow: true },
				{ field: 'department', title: '部门', showOverflow: true },
				{ field: 'phone', title: '手机号', showOverflow: true },
				{ field: 'email', title: '邮箱', showOverflow: true },
				{ field: 'status', title: '用户状态', showOverflow: true, slots: { default: 'status_default' } },
				{ field: 'describe', title: '用户描述', showOverflow: true },
				{ field: 'createTime', title: '创建时间', showOverflow: true },
				{ title: '操作', width: 200, slots: { default: 'operate' } },
			],
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
				refresh: true,
			},
			proxyConfig: {
				form: true,// 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
				seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
				props: {
					result: 'records',
					total: 'total',
				},
				ajax: {
					// 接收 Promise
					// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
					query: ({ page, form  }) => {
						const queryParams: any = Object.assign({}, form)
						console.log(queryParams)
						return new Promise((resolve) => {
							let params: IUserParams = {
								...queryParams,
								page: page.currentPage,
								pageSize: page.pageSize,
							};
							getUser(params).then((res) => {
								if (!res.code) {
									resolve(res.data);
								}
							});
						});
					},
				},
			},
		});
</script>

<style>
</style>